/**
 * 简易的指定内容打印功能，最好不要传入 el 组件 - https://juejin.im/post/5de4f87cf265da05c7722c20
 * 可以使用功能更强大的 vue3-print-nb 依赖包
 */

/**
 * 获取、设置打印样式
 * @returns
 */
function getStyle() {
  const styleContent = `
    #print-container { display: none; }
    @media print {
      body > :not(.print-container) { display: none; }
      html, body { display: block !important; }
      #print-container { display: block; }
    }
  `;
  const style = document.createElement('style');
  style.innerHTML = styleContent;
  return style;
}

/**
 * 清空打印内容
 */
function cleanPrint() {
  const div = document.getElementById('print-container');
  if (div) {
    document.querySelector('body')?.removeChild(div);
  }
}

/**
 * 新建DOM，将需要打印的内容填充到DOM
 * @param {*} html
 * @returns
 */
function getContainer(html: string) {
  cleanPrint();
  const container = document.createElement('div');
  container.setAttribute('id', 'print-container');
  container.innerHTML = html;
  return container;
}

/**
 * 图片完全加载后再调用打印方法
 * @param {*} dom
 * @returns
 */
function getLoadPromise(dom: HTMLElement) {
  const imgs = dom.querySelectorAll('img');
  const _imgsArr: HTMLElement[] = [].slice.call(imgs);

  if (_imgsArr.length === 0) return Promise.resolve();

  let finishedCount = 0;
  return new Promise((resolve) => {
    function check() {
      finishedCount += 1;
      if (finishedCount === _imgsArr.length) resolve(null);
    }
    _imgsArr.forEach((img: HTMLElement) => {
      img.addEventListener('load', check);
      img.addEventListener('error', check);
    });
  });
}

/**
 * 打印指定 HTML
 * @export
 * @param {*} html
 */
export default function printHtml(html: string) {
  const style = getStyle();
  const container = getContainer(html);

  document.body.appendChild(style);
  document.body.appendChild(container);
  getLoadPromise(container).then(() => {
    window.print();
    document.body.removeChild(style);
    document.body.removeChild(container);
  });
}
